import React from 'react'

import {Carousel} from "antd";
import {WeaTable} from "ecCom";

export default class ContainerViewExtend extends React.Component{

    hasIndex= (indexs ,index)=>{
        for(let i in indexs){
            if(indexs[i].dataIndex == index){
                return true
            }
        }
        return false
    }

    render(){
        const {data,tabId} = this.props
        const {items,setting,eFieldNewDataSource,style}  = data
        for(let tabId in items){
            if(items.hasOwnProperty(tabId)){
                let columns = []
                let selectColumns = []
                let list = []
                let setting = {}
                let imgs = []
                if(data.items && data.items[tabId] && data.items[tabId].setting.eFieldNewUsedKeys){
                    list = data.items[tabId].docs
                    setting = data.items[tabId].setting
                    selectColumns = data.items[tabId].setting.eFieldNewUsedKeys
                    for(let i in list){
                        list[i].icon = ''
                        if(list.hasOwnProperty(i)){
                            if(list[i].images.length ==1 && list[i].images[0] == "/images/homepage/noimgdefault_wev8.jpg"){

                            }else{
                                imgs.push({"img":list[i].images[0],"link":list[i].docsubject.link});
                            }
                        }
                    }
                    if(imgs.length == 0 && list.length > 0){
                        imgs.push({"img":"/images/homepage/noimgdefault_wev8.jpg","link":""})
                    }
                }
                {
                    style.iconEsymbol ? (
                        columns.push({"dataIndex":'icon',"key":'icon',"width":'8px',"render": (text) => <img src={style.iconEsymbol} style={{'margin-bottom':'4px'}}/>})
                    ) : null
                }
                for(let i in selectColumns){
                    if(selectColumns.hasOwnProperty(i)){
                        for(let j in eFieldNewDataSource){
                            if(eFieldNewDataSource.hasOwnProperty(j)){
                                if(selectColumns[i] == eFieldNewDataSource[j].id){
                                    if(eFieldNewDataSource[j].fieldColumn=='docsubject'){
                                        columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"width":eFieldNewDataSource[j].width,"render": (text) => {return <div title={text.name} className="column-item column-docsubject font" onClick={()=>{window.open(text.link)}}>{text.name}</div>}})
                                    }else if(eFieldNewDataSource[j].fieldColumn=='doccreater'){
                                        columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"width":eFieldNewDataSource[j].width,"render": (text) => {return <div title={text.name}  className="column-item column-doccreater font">{text.name}</div>}})
                                    }else if(eFieldNewDataSource[j].fieldColumn=='img'){
                                        continue
                                    }else{
                                        columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"width":eFieldNewDataSource[j].width,"render": (text) => <div title={text}  className="column-item column-other font">{text}</div>})
                                    }

                                }
                            }

                        }
                    }

                }

                items[tabId].columns = columns
                items[tabId].list = list
                items[tabId].imgs = imgs
            }

        }

        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay:true,
        };

        let content = null
        let item
        if(items.length > 0 && items.find((element)=>(element.id == tabId))){
            item =items.find((element)=>(element.id == tabId))
            if(item.setting.showType == '1') {
                content = <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@xzv9jv`} columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} />
            }else if(item.setting.showType == '2'){
                content = (
                    <div>
                        <div className='data-html2canvas-ignore' style={{width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%"),float:"left",'padding-top':'6px'}}>
                            {
                                item.imgs.length > 1 ? (
                                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@gz9o9d`} {...settings}>
                                        {
                                            item.imgs.map((item2,index)=>{
                                                return (
                                                    <img style={{cursor:'pointer',width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}} onClick={()=>{if(item2.link){window.open(item2.link)}}} src={item2.img}/>
                                                )
                                            })
                                        }
                                    </Carousel>
                                ) : null
                            }
                            {
                                item.imgs.length == 1  ?  (
                                    <img style={{cursor:'pointer',width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}} onClick={()=>{if(item.imgs[0].link){window.open(item.imgs[0].link)}}} src={item.imgs[0].img}/>
                                ) : null
                            }


                        </div>
                        <div style={{'margin-left':item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),'padding':'0 8px'}}>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@rqaz74`} columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} />
                        </div>
                    </div>
                )
            }else if(item.setting.showType == '3'){
                content = (
                    item.docs.map((item2,index)=>{
                        return (
                            <div style={{overflow:'hidden','margin-bottom':'10px'}}>
                                <div style={{
                                    width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                    height: item.setting.imgHeight + (item.setting.imgHeightType == 1 ? "px" : "%"),
                                    float: "left"
                                }} className='data-html2canvas-ignore'>

                                    {
                                        item2.images.length > 1 ? (
                                            <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@8jpcdy@${item2.id}`} {...settings}>
                                                {
                                                    item2.images.map((item3, index) => {
                                                        return (
                                                            <img style={{
                                                                cursor:'pointer',
                                                                width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                            }} onClick={() => {
                                                                window.open(item2.docsubject.link)
                                                            }} src={item3}/>
                                                        )
                                                    })
                                                }
                                            </Carousel>
                                        ) : null
                                    }
                                    {

                                        item2.images.length ==  1 ? (
                                            <img style={{
                                                cursor:'pointer',
                                                width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                            }} onClick={() => {
                                                window.open(item2.docsubject.link)
                                            }} src={item2.images[0]}/>
                                        ): null
                                    }


                                </div>
                                <div style={{'margin-left': item.setting.imgWidth+ (item.setting.imgWidthType == 1 ? "px" : "%"),'padding-left':'3px'}}>
                                    {
                                        this.hasIndex(item.columns,"docsubject") ?
                                            <div style={{'margin': '10px 10px 10px 0px'}}>
                                                <span className="font" style={{cursor:'pointer',display:'inline-block','width':'100%','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}</span>
                                            </div>
                                            :""
                                    }
                                    <div style={{marginBottom:'10px'}}>
                                        <span style={{width: '99%', overflow: 'hidden', textOverflow: 'ellipsis', WebkitLineClamp: '1',WebkitBoxOrient: 'vertical', display: '-webkit-box',  marginBottom: '10px'}}>{item2.summary}</span>
                                    </div>

                                    <div style={{margin: '10px 0px 10px 0px'}}>
                                        {
                                            this.hasIndex(item.columns,"doccreater") ?
                                                <span className="font" style={{display: 'inline-block',width: 'calc(100% - 134px)', overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap','margin-right':'10px'}}>{item2.doccreater.name}</span>
                                                :""
                                        }
                                        {
                                            this.hasIndex(item.columns,"doccreatedate") ?
                                                <span style={{ paddingLeft: '5px', fontSize: '12px', color: '#999999', letterSpacing: '-0.08px'}}>{item2.doccreatedate}</span>
                                                :""
                                        }
                                        {
                                            this.hasIndex(item.columns,"doccreatetime") ?
                                                <span  style={{ paddingLeft: '5px', fontSize: '12px', color: '#999999', letterSpacing: '-0.08px'}}>{item2.doccreatetime}</span>
                                                :""
                                        }
                                    </div>

                                </div>
                            </div>
                        )
                    })
                )
            }

        }

        return (
            <div className="companyNewsPerfect-viewExtend" style={{height:'100%'}}>
                {content}
            </div>
        )
    }
}